<script setup lang="tsx">
import type { Ref } from 'vue'
import { Bottom, Top } from '@element-plus/icons-vue'
import { statusIdentity } from '..'
import type { StatisticsCardProps } from './type.d'

defineOptions({ name: 'StatisticsCard' })

defineProps<StatisticsCardProps>()
function Trend(props: { value: number | null }) {
  const { value } = props
  if (value === 0) {
    return (
      <span class="text-green">
        {value}
        %
      </span>
    )
  }
  else if (!value) {
    return '---'
  }
  else if (value > 0) {
    return (
      <span class="text-red">
        +
        {value}
        %
        <el-icon>
          <Top />
        </el-icon>
      </span>
    )
  }
  else {
    return (
      <span class="text-green">
        {value}
        %
        <el-icon>
          <Bottom />
        </el-icon>
      </span>
    )
  }
}
// ------------------use------------------
// #region
const hideTrend = inject<Ref<boolean>>(statusIdentity)
// #endregion
// ------------------静态变量------------------
// #region

// #endregion
// ------------------动态变量------------------
// #region

// #endregion
// ------------------ref-----------
// #region

// #endregion
// ------------------reactive------
// #region

// #endregion
// ------------------computed------
// #region

// #endregion
// ------------------生命周期------------------
// #region

// #endregion
// ------------------内置方法---------------------
// #region

// #endregion
// ------------------方法---------------------
// #region

// #endregion
</script>

<template>
  <div
    class="c-pointer padding-xs alpha-block statistics-card box-border"
  >
    <h3 class="!margin-0 statistics-card-title">
      {{ title }}
    </h3>
    <div
      class="margin-tb-xs statistics-card-content flex gap-col-xs align-end"
    >
      <span class="fs-30">
        {{
          value == null
            ? '--'
            : (+value.toFixed(2)).toLocaleString()
        }}
      </span>
      <i v-if="unit" class="fs-14 fw-4">{{ unit }}</i>
    </div>
    <div
      v-if="!hideTrend"
      class="fs-14 statistics-card-footer flex justify-between"
    >
      <p class="!margin-0">
        同比：
        <Trend :value="yoy" />
      </p>
      <p class="!margin-0">
        环比：
        <Trend :value="qoq" />
      </p>
    </div>
  </div>
</template>

<style lang="scss" scoped>
//------------------组件样式------------------
.statistics-card {
  --statistics-card-height: var(
    --statistics-tabs-height,
    130px
  );
  min-width: 250px;
  flex: 1;
  height: var(--statistics-card-height);
  border: 1px solid var(--el-border-color-light);
  border-radius: 0.2rem;
  transition: box-shadow 0.3s, background-color 0.3s;
  &.active {
    background-color: var(--el-color-primary-light-8);
  }
  &:hover {
    box-shadow: 2px 2px rgba(0, 0, 0, 0.06),
      5px 5px rgba(0, 0, 0, 0.04);
  }
  &-title {
    // color: var(--el-text-color-primary);
  }
  &-content {
    span {
      max-width: 200px;
      color: var(--el-text-color-primary);
    }
    i {
      color: var(--el-text-color-placeholder);
      font-style: normal;
    }
  }
  &-footer {
    color: var(--el-text-color-regular);
  }
}
//-------------样式穿透-------------
</style>
